<template>
  <div class="nav-list">
    <div class="nav-grid">
      <div
        v-for="item in navList"
        :key="item.id"
        class="nav-item"
        @click="handleNavClick(item)"
      >
        <div class="nav-icon">
          <img 
            :src="item.imageURL" 
            :alt="item.title"
            @error="handleImageError"
          />
        </div>
        <span class="nav-title">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

// 使用内置的8宫格导航数据
const navList = [
  { id: 1, title: '合租', imageURL: 'src/assets/imgs/rent_1.png' },
  { id: 2, title: '独卫主卧', imageURL: 'src/assets/imgs/rent_2.png'},
  { id: 3, title: '整租1居', imageURL: 'src/assets/imgs/rent_3.png' },
  { id: 4, title: '整租2-3居', imageURL: 'src/assets/imgs/rent_4.png' },
  { id: 5, title: '小客厅', imageURL: 'src/assets/imgs/rent_5.png' },
  { id: 6, title: '大客厅', imageURL: 'src/assets/imgs/rent_6.png' },
  { id: 7, title: '短租', imageURL: 'src/assets/imgs/rent_7.png' },
  { id: 8, title: '拼金0首付', imageURL: 'src/assets/imgs/rent_8.png' }
]

const handleNavClick = (item) => {
  ElMessage.info(`点击了${item.title}`)
  // 这里可以添加路由跳转逻辑
  console.log('导航点击:', item)
}

const handleImageError = (event) => {
  event.target.src = '/src/assets/imgs/blank.png'
}
</script>

<style scoped>
.nav-list {
  background-color: #fff;
  margin: 0 16px 16px;
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.nav-item:hover {
  transform: translateY(-2px);
}

.nav-item:active {
  transform: translateY(0);
}

.nav-icon {
  width: 52px;
  height: 52px;
  background-color: #f8f9fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.nav-item:hover .nav-icon {
  background-color: #e9ecef;
  border-color: #ddd;
}

.nav-icon img {
  width: 32px;
  height: 32px;
}

.nav-title {
  font-size: 12px;
  color: #333;
  text-align: center;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-grid {
    gap: 16px;
  }
  
  .nav-icon {
    width: 44px;
    height: 44px;
  }
  
  .nav-icon img {
    width: 22px;
    height: 22px;
  }
}
</style>
